<template>
  <div class="page-article" v-if="model">
    <div class="d-flex py-3 px-2">
      <i class="icon-icon_more iconfont"></i>
      <div class="flex-1 mx-2">{{model.title}}</div>
      <div class="text-grey fs-sl">2019-10-12</div>
    </div>

    <div class="z d-flex ml-3">浏览量： {{model.num}}   </div>
    <!-- 渲染详情 -->
    <div v-html="model.body" class="body px-3"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      model: null
    };
  },
  props: {
    id: { required: true }
  },
  created() {
    this.fetch();
    // this.add();
  },
  watch: {
    model: function() {
      this.$nextTick(() => {
        this.add();
      });
    }
  },
  methods: {
    async fetch() {
      const res = await this.$http.get(`web/api/articles/${this.id}`);
      this.model = res.data;
    },
    add() {
      this.model.num = Number(this.model.num) + 1;
      const res = this.$http.put(`web/api/articles/${this.id}`, this.model);
        console.log(this.model.num);
    }
  }
};
</script>


<style lang="scss">
.page-article {
  
  .body {
    img {
      max-width: 100%;
      height: auto;
    }
    iframe {
      max-width: 100%;
      height: auto;
    }
  }
}
</style>